<template>
  <div>
    <div v-for="firstItem in treeObj.list" :key="firstItem.id">
      <div :class="['poi f ac w100 pt2 pb2 ']">
        <div class="w100 f ac">
          <span @click="clickfirstItem(firstItem)" class="pt2 pb2 pr5 pl5">
            <svg t="1689242110316" :class="['poi trans3', firstItem.isSpread ? '' : 'tr-90']" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2812" width="10" height="10"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" p-id="2813" :fill="firstItem.isChecked? '#666' : '#666'"></path></svg>
          </span>
          <div v-if="firstItem.isShowCheckbox" @click="firstItem.disabled ? '' : selectCurItem(!firstItem.isChecked, firstItem)" class="f ac mr30 poi">
            <div :class="['rds2 rel trans3 f ac xc mr5 ovh', firstItem.disabled ? 'disabled' : '']" :style="{width:'17px',height:'17px',background: firstItem.isChecked || firstItem.isIndeterminate ? '#1aada7' : '#fff', border: firstItem.isChecked ? 'none' : '1px solid #dcdee2'}">
              <div v-show="firstItem.isIndeterminate || firstItem.isChecked" :class="['trans3', firstItem.isIndeterminate ? 'rowLine' : firstItem.isChecked ? 'currect' : '']"></div>
            </div>
            {{firstItem.name}}
          </div>
          <div v-else @click="clickCurItem(firstItem)">{{firstItem.name}}</div>
        </div>
      </div>
      <div v-if="firstItem.isSpread">
        <div v-for="secondItem in firstItem.children" :key="secondItem.id" class="pl40">
          <div :class="['poi f ac w100 pt2 pb2 borderBox rel']">
            <span v-if="secondItem.children.length" @click="clickSecondItem(secondItem)" style="left:-20px;" class="abs poi pt2 pb2 pr5 pl5">
              <svg t="1689242110316" :class="['trans3', secondItem.isSpread ? '' : 'tr-90']" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2812" width="10" height="10"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" p-id="2813" :fill="secondItem.isChecked ? '#666' : '#666'"></path></svg>
            </span>
            <div v-if="secondItem.isShowCheckbox" @click="secondItem.disabled ? '' : selectCurItem(!secondItem.isChecked, secondItem)" class="f ac mr30 poi">
              <div :class="['rds2 rel trans3 f ac xc mr5 ovh', secondItem.disabled ? 'disabled' : '']" :style="{width:'17px',height:'17px',background: secondItem.isChecked || secondItem.isIndeterminate ? '#1aada7' : '#fff', border: secondItem.isChecked ? 'none' : '1px solid #dcdee2'}">
                <div v-show="secondItem.isIndeterminate || secondItem.isChecked" :class="['trans3', secondItem.isIndeterminate ? 'rowLine' : secondItem.isChecked ? 'currect' : '']"></div>
              </div>
              {{secondItem.name}}
            </div>
            <div v-else @click="clickCurItem(secondItem)">{{secondItem.name}}</div>
          </div>
          <div v-if="secondItem.isSpread" class="pl20">
            <div v-for="thirdItem in secondItem.children" :key="thirdItem.id">
              <div :class="['poi f ac w100 pt2 pb2 borderBox rel']">
                <span v-if="thirdItem.children.length!=0" @click="clickthirdItem(thirdItem)" style="left:-20px;" class="abs poi pt2 pb2 pr5 pl5">
                  <svg t="1689242110316" :class="['trans3', thirdItem.isSpread ? '' : 'tr-90']" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2812" width="10" height="10"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" p-id="2813" :fill="thirdItem.isChecked ? '#666' : '#666'"></path></svg>
                </span>
                <div v-if="thirdItem.isShowCheckbox" @click="thirdItem.disabled ? '' : selectCurItem(!thirdItem.isChecked, thirdItem)" class="f ac mr30 poi">
                  <div :class="['rds2 rel trans3 f ac xc mr5 ovh', thirdItem.disabled ? 'disabled' : '']" :style="{width:'17px',height:'17px',background: thirdItem.isChecked || thirdItem.isIndeterminate ? '#1aada7' : '#fff', border: thirdItem.isChecked ? 'none' : '1px solid #dcdee2'}">
                    <div v-show="thirdItem.isIndeterminate || thirdItem.isChecked" :class="['trans3', thirdItem.isIndeterminate ? 'rowLine' : thirdItem.isChecked ? 'currect' : '']"></div>
                  </div>
                  {{thirdItem.name}}
                </div>
                <div v-else @click="clickCurItem(thirdItem)">{{thirdItem.name}}</div>
              </div>
              <div v-if="thirdItem.isSpread" class="pl20">
                <div v-for="forthItem in thirdItem.children" :key="forthItem.id">
                  <div :class="['poi f ac w100 pt2 pb2 rel']">
                    <span v-if="forthItem.children.length!=0" @click="clickforthItem(forthItem)" style="left:-20px;" class="abs poi pt2 pb2 pr5 pl5">
                      <svg t="1689242110316" :class="['trans3', forthItem.isSpread ? '' : 'tr-90']" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2812" width="8" height="8"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" p-id="2813" :fill="forthItem.isChecked ? '#666' : '#666'"></path></svg>
                    </span>
                    <div v-if="forthItem.isShowCheckbox" @click="forthItem.disabled ? '' : selectCurItem(!forthItem.isChecked, forthItem)" class="f ac mr30 poi">
                      <div :class="['rds2 rel trans3 f ac xc mr5 ovh', forthItem.disabled ? 'disabled' : '']" :style="{width:'17px',height:'17px',background: forthItem.isChecked || forthItem.isIndeterminate ? '#1aada7' : '#fff', border: forthItem.isChecked ? 'none' : '1px solid #dcdee2'}">
                        <div v-show="forthItem.isIndeterminate || forthItem.isChecked" :class="['trans3', forthItem.isIndeterminate ? 'rowLine' : forthItem.isChecked ? 'currect' : '']"></div>
                      </div>
                      {{forthItem.name}}
                    </div>
                    <div v-else @click="clickCurItem(forthItem)">{{forthItem.name}}</div>
                  </div>
                  <div v-if="thirdItem.isSpread" class="pl20">
                    <div v-for="fifthItem in forthItem.children"  :key="fifthItem.id" >
                      <div :class="['poi f ac w100 pt2 pb2 rel']">
                        <span v-if="fifthItem.children.length!=0" style="left:-20px;" class="abs poi pt2 pb2 pr5 pl5">
                          <svg t="1689242110316" :class="['trans3', fifthItem.isSpread ? '' : 'tr-90']" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2812" width="8" height="8"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" p-id="2813" :fill="fifthItem.isChecked ? '#666' : '#666'"></path></svg>
                        </span>
                        <div v-if="fifthItem.isShowCheckbox" @click="fifthItem.disabled ? '' : selectCurItem(!fifthItem.isChecked, fifthItem)" class="f ac mr30 poi">
                          <div :class="['rds2 rel trans3 f ac xc mr5 ovh', fifthItem.disabled ? 'disabled' : '']" :style="{width:'17px',height:'17px',background: fifthItem.isChecked || fifthItem.isIndeterminate ? '#1aada7' : '#fff', border: fifthItem.isChecked ? 'none' : '1px solid #dcdee2'}">
                            <div v-show="fifthItem.isIndeterminate || fifthItem.isChecked" :class="['trans3', fifthItem.isIndeterminate ? 'rowLine' : fifthItem.isChecked ? 'currect' : '']"></div>
                          </div>
                          {{fifthItem.name}}
                        </div>
                        <div v-else @click="clickCurItem(fifthItem)">{{fifthItem.name}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src='./index.js'></script>
<style src='./index.css' scoped>
</style>